<template>
	<a-modal title="选择物料" :width="1200" :maskClosable="false" :visible="visible" :confirmLoading="confirmLoading"
		:footer="null" @cancel="handleCancel">

		<a-spin :spinning="confirmLoading">
			<div class="table-page-search-wrapper">
				<a-form layout="inline">
					<a-row :gutter="48">

						<a-col :md="8" :sm="24">
							<a-form-item label="名称">
								<a-input v-model="queryParam.materialName" placeholder="请输入名称" />
							</a-form-item>
						</a-col>

						<a-col :md="8" :sm="24">
							<a-form-item label="料号">
								<a-input v-model="queryParam.materialCode" placeholder="请输入料号" />
							</a-form-item>
						</a-col>
						<a-col :md="24" :sm="24">
							<span class="table-page-search-submitButtons" :style="{ float: 'right', overflow: 'hidden' } || {}">
								<a-button type="primary" @click="$refs.table.refresh(true)">查询</a-button>
							</span>
						</a-col>
					</a-row>
				</a-form>
			</div>
			<s-table ref="table" size="default" :columns="columns" :data="loadData" :alert="true">
				<span slot="action" slot-scope="text, record">					
					<a @click="handleSelect(record)" v-if="!selectedMaterial.includes(record.materialId)">选择</a>
					<a disabled v-else>已选择</a>
				</span>
				<span slot="image" slot-scope="text,record">
					<image-preview1 :images="text" :imageUrl="record.imageUrl" />
				</span>
			</s-table>
		</a-spin>
	</a-modal>
</template>

<script>
import { STable } from '@/components'
import { page } from '@/api/modular/main/emsmaterial/emsMaterialManage'

export default {
	components: {
		STable,
	},

	data() {
		return {
			materialId: '',
			queryParam: {},  //顶部搜索
			selectedList: [],
			materialType: '',
			orgIdSupplier: '',
			selectedMaterial: [],
			labelCol: {
				xs: { span: 24 },
				sm: { span: 5 }
			},
			wrapperCol: {
				xs: { span: 24 },
				sm: { span: 15 }
			},
			visible: false,
			confirmLoading: false,
			form: this.$form.createForm(this),
			// 加载数据方法 必须为 Promise 对象
			loadData: parameter => {
				let query = {
					...parameter,
					...this.queryParam,
					materialType: this.materialType,
					orgIdSupplier: this.orgIdSupplier
				}
				return page(query).then((res) => {
					return res.data
				})
			},
			columns: [       // 表头
				{
					title: '序号', width: '80px',
					dataIndex: 'index',
					key: 'index',
					align: 'center',
					customRender: (text, record, index) => `${index + 1}`,
				},
				{
					title: '料号',
					dataIndex: 'materialCode'
				},
				{
					title: '名称',
					dataIndex: 'materialName'
				},
				{
					title: '规格',
					dataIndex: 'materialModelNumber'
				},
				{
					title: '图片',
					dataIndex: 'image',
					// customRender: (text, record, index) => this.$util.createFcImage(this.$createElement, text)
					scopedSlots: { customRender: 'image' }
				},
				{
					title: '库存数量',
					dataIndex: 'inventoryNumber'
				},
				{
					title: '预警值',
					dataIndex: 'inventoryWarningValue'
				},
				{
					title: '归属公司',
					dataIndex: 'orgIdCompanyName',
					// customRender: (text, record, index) => `${this.findOrg(text).name}`,
					ellipsis: false,
				},
				{
					title: '归属供应商',
					dataIndex: 'orgIdSupplierName',
					// customRender: (text, record, index) => `${this.findOrg(text).name}`,
					ellipsis: false,
				},
				{
					title: '操作',
					dataIndex: 'action',
					width: '100px',
					align: 'center',
					scopedSlots: { customRender: 'action' }
				}
			],
			poolType: "1479447062284427265",
		}
	},
	methods: {
		init(params) {
			this.materialType = params.materialType;
			this.orgIdSupplier = params.orgIdSupplier;
			this.selectedMaterial = params.selectedMaterial;
			this.visible = true
			setTimeout(() => {
				this.$refs.table.refresh()
			}, 100)
		},
		// 选择物料
		handleSelect(row) {
			this.$emit('selected', row)
			this.visible = false
		},
		handleCancel() {
			this.form.resetFields()
			this.visible = false
			this.queryParam = {}
			this.materialId = ''
		},
	}
}
</script>